<template>
  <div id="comment">
    <div class="inpuBox">
      <van-field
        v-model="myComment"
        rows="1"
        autosize
        type="textarea"
        placeholder="说点什么吧"
        class="input"
      />
      <span></span>
      <button @click="publish">发布</button>
    </div>

    <CommentDetails
      :userInfo="userInfo"
      :commentData="commentData"
      @replyComments="replyComments"
      v-if="commentData[0]"
    /> 
    
    <div class="replace" v-else >
      <p>空空如也，快来抢沙发吧！！！</p>
    </div>  


    <!-- 回复输入框 -->
    <van-popup
      v-model="show"
      @closed="closeReComment"
      position="bottom"
      get-container="body"
      style="background-color:white"
    >
      <div style="display: flex;padding:2.778vw 1.389vw">
        <van-field
          v-model="reComment"
          rows="1"
          autosize
          type="textarea"
          autofocus="true"
          :placeholder="placeholder"
          :style="commentStyle"
        />
        <button :style="buttonStyle" @click="publishReComment">发送</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import CommentDetails from "@/components/article/CommentDetails.vue";

export default {
  props: ["userInfo"],
  components: { CommentDetails },
  data() {
    return {
      myComment: "",
      commentData: [],
      Postcom: {
        comment_content: "",
        comment_date: "",
        parent_id: null,
        article_id: null,
      },
      show: false,
      parent_id:null,
      reComment:"",
      placeholder:"",
      commentStyle: {
        backgroundColor: "#f4f4f4",
        borderRadius: "4.167vw",
        padding: " 0.556vw 2.778vw 0.556vw 2.778vw",
        maxHeight: "21.111vw",
        overflow: "scroll",
        fontSize: "3.611vw",
      },
      buttonStyle: {
        border: "none",
        backgroundColor: "white",
        color: "#757575",
        width: "22.222vw",
        height: "6.944vw",
        lineHeight: "6.944vw",
        borderRadius: "4.167vw",
        fontSize: "3.889vw",
        alignSelf: "flex-end",
      },
    };
  },
  methods: {
    /* 获取评论数据 */
    async getCommentData() {
      let res = await this.$http.get(`/comment/${this.$route.params.id}`);
      this.addChildList(res.data);
      this.commentData = [];
      this.change(res.data, this.commentData, null);
      console.log(this.commentData);
    },
    /* 修改评论数据的结构 */
    // 1.为每个评论数据添加children属性来放置子评论数据
    addChildList(data) {
      data.forEach((item) => {
        item.children = [];
      });
    },
    // 2.将子评论放置在父评论的children里
    change(data, arr, id) {
      data.forEach((item) => {
        if (item.parent_id == id) {
          arr.push(item);
          let i = arr.length - 1;
          let children = arr[i].children;
          this.change(data, children, item.comment_id);
        }
      });
    },
    /* 发表一级评论 */
    publish() {
      if (!localStorage.getItem("token") && !localStorage.getItem("id")) {
        this.$toast("先登录才能发表品论哦");
        return;
      }
      if (!this.myComment) {
        this.$toast("您什么也没说呢");
        return;
      }
      this.PostComment(this.myComment,null);
    },
    async PostComment(content,parentId) {
      let date = new Date();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      let str = `${m}-${d}`;
      this.Postcom.comment_content = content;
      this.Postcom.comment_date = str;
      this.Postcom.article_id = this.$route.params.id;
      this.Postcom.parent_id = parentId;
      let res = await this.$http.post(
        "/comment_post/" + localStorage.getItem("id"),
        this.Postcom
      );
      // this.Postcom.parent_id = null;
      if (res.status == 200) {
        // 刷新评论
        this.getCommentData()
        this.$toast.fail("评论发表成功");
        
      }
      this.myComment = "";
      this.Postcom.comment_content = "";
      this.Postcom.comment_date = "";
      this.Postcom.article_id = null;
      this.Postcom.parent_id = null;
    },
    /* 回复评论 */
    replyComments(parent_name,parent_id) {
      if (!localStorage.getItem("token") && !localStorage.getItem("id")) {
        this.$toast("先登录才能发表品论哦");
        return;
      }
      this.setPlaceholder(parent_name);
      this.show = true;
      this.parent_id = parent_id;
    },
    // 发表回复评论
    publishReComment(){
      if (!this.reComment) {
        this.$toast("您什么也没说呢");
        return;
      }
      this.PostComment(this.reComment,this.parent_id);
      this.show = false;
      this.parent_id = null;
      this.reComment = "";
    },
    closeReComment(){
      this.parent_id = null;
      this.reComment = "";
    },
    setPlaceholder(name){
      if (name) {
        this.placeholder = `回复 @${name}`
      }else{
        this.placeholder = "回复 @"
      }
    }
  },
  created() {
    this.getCommentData();
  },
  watch: {
    $route() {
      this.getCommentData();
    },
  },
};
</script>

<style lang="less" scoped>
#comment {
  background-color: white;
  padding: 4.167vw 2.778vw 0;
  .inpuBox {
    display: -webkit-flex;
    display: flex;
    padding-bottom: 5.556vw;
    .input {
      background-color: #f4f4f4;
      border-radius: 4.167vw;
      padding: 0.556vw 2.778vw 0.556vw 2.778vw;
      max-height: 21.111vw;
      overflow: scroll;
      font-size: 3.611vw;
    }
    button {
      border: none;
      background-color: skyblue;
      color: white;
      width: 22.222vw;
      height: 6.944vw;
      line-height: 6.944vw;
      border-radius: 4.167vw;
      margin: 0 6.944vw 0.556vw 4.167vw;
      font-size: 3.889vw;
      align-self: flex-end;
    }
  }
  .replace{
    margin-top: 27.778vw;
    padding-bottom: 69.444vw;
    p{
      text-align: center;
      color: rgb(179, 178, 178);
      font-size: 4.167vw;
    }
  }
}
</style>
